<template>
  <div class="basic-detail-page">
    <el-page-header v-if="JSON.stringify(detailInfo) !== '{}'" class="page-header" :content="'注入参数优化详情 —— '+ detailInfo.predictionOptimizationDetail.wellName" @back="handleCloseDetail" />
    <el-tabs v-if="JSON.stringify(detailInfo) !== '{}'" v-model="tab" type="border-card" class="tabs">
      <el-tab-pane label="基础信息" name="1" class="basic-info">
        <el-row class="el-row-item">
          <el-col :span="12"><label>井名</label>{{ detailInfo.predictionOptimizationDetail.wellName }}</el-col>
          <el-col :span="12"><label>井类型</label>{{ detailInfo.predictionOptimizationDetail.wellType | filterType(wellTypeOptions) }}</el-col>
          <el-col :span="12"><label>生产井段(m)</label>{{ detailInfo.predictionOptimizationDetail.wellSeg }}</el-col>
          <el-col :span="12"><label>方案名</label>{{ detailInfo.predictionOptimizationDetail.planName }}</el-col>
          <el-col :span="12"><label>CO2注入段长度(m)</label>{{ detailInfo.predictionOptimizationDetail.injectionLength }}</el-col>
          <el-col :span="12"><label>CO2注入厚度(m)</label>{{ detailInfo.predictionOptimizationDetail.injectionThickness }}</el-col>
          <el-col :span="12"><label>地层压力(MPa)</label>{{ detailInfo.predictionOptimizationDetail.formationPressure }}</el-col>
          <el-col :span="12"><label>地层温度(℃)</label>{{ detailInfo.predictionOptimizationDetail.formationTemperature }}</el-col>
          <el-col :span="12"><label>孔隙度(%)</label>{{ detailInfo.predictionOptimizationDetail.porosity }}</el-col>
          <el-col :span="12"><label>经验系数(Pv)</label>{{ detailInfo.predictionOptimizationDetail.empiricalCoefficient }}</el-col>
          <el-col :span="12"><label>短轴处理半径(m)</label>{{ detailInfo.predictionOptimizationDetail.shortRadius }}</el-col>
          <el-col :span="12"><label>长轴处理半径(m)</label>{{ detailInfo.predictionOptimizationDetail.longRadius }}</el-col>
          <el-col :span="12"><label>井底CO2密度(g/cm3)</label>{{ detailInfo.predictionOptimizationDetail.wellBottomDensity }}</el-col>
          <el-col :span="12"><label>井底CO2体积(m3)</label>{{ detailInfo.predictionOptimizationDetail.wellBottomVolume }}</el-col>
          <el-col :span="12"><label>CO2注入量(t/d)</label>{{ detailInfo.predictionOptimizationDetail.injectionVolume }}</el-col>
          <el-col :span="12"><label>创建人</label>{{ detailInfo.predictionOptimizationDetail.createName }}</el-col>
          <el-col :span="12"><label>创建时间</label>{{ detailInfo.predictionOptimizationDetail.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</el-col>
        </el-row>
      </el-tab-pane>
      <!--      <el-tab-pane label="提醒信息" name="3">-->
      <!--        <el-card class="box-card-item">-->
      <!--          <div slot="header" class="clearfix">-->
      <!--            <span>提醒内容( {{ detailInfo.synPrjmgtDetail.prjmgtReminderTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }} )</span>-->
      <!--          </div>-->
      <!--          <div v-html="detailInfo.synPrjmgtDetail.prjmgtReminderContent" />-->
      <!--        </el-card>-->
      <!--      </el-tab-pane>-->
    </el-tabs>
  </div>
</template>

<script>
import { getOptimizationDetail } from '@/api/prediction'
import { getSysDictByType, queryUsername } from '@/api/admin'
export default {
  name: '',
  directives: {},
  filters: {},
  data() {
    return {
      detailInfo: {},
      wellTypeOptions: [],
      candidateOptions: [],
      tab: '1'
    }
  },
  computed: {
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (from.name === 'fileDetail') {
        vm.tab = '2'
      }
      // 通过 `vm` 访问组件实例
    })
  },
  created() {
    this.getDetail()
  },
  mounted() {
  },
  methods: {
    getDetail() {
      getSysDictByType('well_type').then(response => {
        this.wellTypeOptions = response.data
      })
      getOptimizationDetail(this.$route.query.id).then(response => {
        this.detailInfo = response.data
      })
      queryUsername().then(response => {
        this.candidateOptions = response.data
      })
    },
    handleCloseDetail() {
      this.$router.push({
        name: 'parameter'
      })
    }
  }
}
</script>

<style scoped lang="scss">
</style>
